<template>
<el-container class="home_container">
  <el-header>  
      <div class='header_box'>
          <img src="../assets/logo.png" alt="">
          <span>黑马商城后台管理</span>
      </div>
      <div class="logout_btn">
          <el-button type="info" v-on:click="logout">退出</el-button>
      </div>
  </el-header>
  <el-container class="bodybox">
    <el-aside >
     
  <el-col >
     <div class='toggle-button' v-on:click='toggleCollage'  v-bind:style="!iscollapse?'width=300px':'width:64px'">|||</div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#409EFF"
      v-bind:unique-opened="true"
      v-bind:collapse="iscollapse"
      v-bind:collapse-transition="false"
      v-bind:router='true'
      v-bind:defaultActive="'/'+activePath"
      >
       <!-- v-bind:unique-opened="true"解决一次只能展开一个下拉菜单的问题 为false则可以都展开
       collapse 为true表示不折叠   collapse-transition 是否开启折叠动画
       router 为侧边栏开启路由 这个是elementUI独有的
       defaultActive 让左侧的点击才当高亮 之前有 由于使用了elementUI的功能导致失效，现在通过其他方式设置
        -->
        <!-- v-bind:index 只让选中的高亮显示，其他的不高亮显示 -->
      <el-submenu :index="item.id+''" v-bind:key='item.id' v-for='item in menuList'>
        <template slot="title">
          <i v-bind:class="iconObj[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
                <!-- v-bind:index 只让选中的高亮显示，其他的不高亮显示 
                  开启elementUI独有的侧边栏路由 然后改造索引index的值为path路径 则每次跳转都是path了
                -->

            <el-menu-item v-bind:index="'/'+value.path" v-bind:key='value.id'  v-for='value in item.children'> 
               <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span v-on:click=savePath(item.path)>{{value.authName}}</span>
                </template>
            </el-menu-item>
   
      </el-submenu>

    </el-menu>
  </el-col>




    </el-aside>
    <el-main>
      <router-view> </router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
export default {
    data(){
        return {
            iconObj:{
              '125':'el-icon-s-custom',
              '103':'el-icon-orange',
              '101':'el-icon-s-goods',
              '102':'el-icon-s-order',
              '145':'el-icon-s-tools',
            },
            menuList:[],
            //是否折叠 默认不折叠
            iscollapse:false,
            activePath:''
            

        }
    },
    methods:{
      savePath(val){
        sessionStorage.setItem('savepath',val)
        this.activePath=val
        // console.log(val);
        
      },
      toggleCollage(){
        this.iscollapse = !this.iscollapse
      },
      logout() {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
    },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
    async getMenu(){
       let {data:res}=await this.axios.get('menus')
       this.menuList=res.data; 
    }
    },mounted(){
        this.getMenu(),
        this.activePath=sessionStorage.getItem('savepath')

    }
    
}
</script>
<style lang="less" scoped>


.el-header {
    display: flex;
    background-color: #373D41;
    justify-content: space-between;
    .header_box {
      flex:1;
      img {
          height: 60px;
          vertical-align:middle;
      }
      span {
          line-height: 60px;
          padding-left: 20px;
          color:#fff;
          font-size: 20px;
          font-weight: 700;

      }
    };
    .logout_btn{
        line-height: 60px;
    }

    

}
.el-aside {
    //  background-color: #333744;
      height: 100%;
      width:100%;
}
.el-main {
    background-color: #EAEDF1;
    height: 100%;
    width:100%;
}
.home_container {
    height: 100%;

}
.el-menu{
  border-right:none;
}
.toggle-button {
  background-color:#4A5064;
  color:#fff;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}


</style>
